<template>
  <div class="settings-page">
    <!-- 返回图标 -->
    <img src="../assets/icons/basic-detail.svg" class="icon" @click="goBack" />
    
    <!-- 设置列表 -->
    <ul class="settings-list">
      <li @click="editProfile('avatar')">
        <img src="../assets/icons/wallet.svg" class="list-item-icon" alt="Avatar Icon" />
        修改头像
        <img src="../assets/icons/wallet.svg" class="list-icon">
      </li>
      <li @click="editProfile('username')">
        <img src="../assets/icons/wallet.svg" class="list-item-icon" alt="Username Icon" />
        修改用户名
        <img src="../assets/icons/wallet.svg" class="list-icon">
      </li>
      <li @click="editProfile('password')">
        <img src="../assets/icons/wallet.svg" class="list-item-icon" alt="Password Icon" />
        修改密码
        <img src="../assets/icons/wallet.svg" class="list-icon">
      </li>
      <li @click="editProfile('address')">
        <img src="../assets/icons/wallet.svg" class="list-item-icon" alt="Address Icon" />
        修改常用地址
        <img src="../assets/icons/wallet.svg" class="list-icon">
      </li>
      <li @click="editProfile('notes')">
        <img src="../assets/icons/wallet.svg" class="list-item-icon" alt="Notes Icon" />
        默认备注设置
        <img src="../assets/icons/wallet.svg" class="list-icon">
      </li>
      <li @click="editProfile('gender')">
        <img src="../assets/icons/wallet.svg" class="list-item-icon" alt="Gender Icon" />
        修改性别
        <img src="../assets/icons/wallet.svg" class="list-icon">
      </li>
    </ul>

    <!-- 退出登录按钮 -->
    <button class="logout-button" @click="logout">退出登录</button>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

function goBack() {
  router.push('/');
}

function editProfile(setting) {
  // 这里可以添加逻辑来处理不同的编辑操作
  console.log(`Editing ${setting}`);
  // 例如，可以跳转到不同的编辑页面
  // router.push(`/edit/${setting}`);
}

function logout() {
  // 这里可以添加逻辑来处理退出登录
  console.log('Logging out...');
  // 例如，可以清除本地存储的用户信息并跳转到登录页面
  // localStorage.removeItem('user');
  // router.push('/login');
}
</script>

<style scoped>
.settings-page {
  padding: 20px;
}

.icon {
  position: absolute;
  top: 20px;
  left: 20px;
  cursor: pointer;
  width: 24px;
  height: 24px;
}


.settings-list {
  list-style-type: none;
  padding: 0;
}

.settings-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  cursor: pointer;
  border-bottom: 1px solid #ccc;
  color: black;
}
.list-item-icon{
  width: 24px;
  height: 24px;
}

.list-icon{
  width: 24px;
  height: 24px;
}

.logout-button {
  background-color: #ff4d4f;
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-top: 20px;
}
</style>